<template>
  <div class="info">
    <div class="info-title">
      <!-- <img src="../../assets/img/left@2x.png" class="left_right_icon" /> -->
      <dv-decoration3 style="width:100px;height:30px;" />
      <div class="titleName">场景能耗</div>
      <dv-decoration3 style="width:100px;height:30px;" />
      <!-- <img src="../../assets/img/right@2x.png" class="left_right_icon" /> -->
    </div>
    <div class="monitor panel1 panelbackImage2 realTimeAlarm" style="height: 100%">
      <div class="inner">
        <div ref="energyConsumption" class="charts" style="width: 100%; height: 100%"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, reactive, onMounted } from "vue";
import parsing from "../../assets/js/parsing";
import * as echarts from "echarts";
var energyConsumptionOption = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      // Use axis to trigger tooltip
      type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
    },
  },
  title: {
    text: " ",
    textStyle: {
      //文字颜色
      color: "#fff",
      //字体大小
      fontSize: 12,
    },
  },
  legend: {
    left: "right",
    right: 10,
    textStyle: {
      fontSize: 10, //字体大小
      color: "#ffffff", //字体颜色
    },
  },
  grid: {
    left: "3%",
    right: "8%",
    bottom: "5%",
    top: "15%",
    containLabel: true,
  },
  xAxis: {
    type: "value",
    splitLine: { show: false },
    axisLabel: {
      show: false,
      textStyle: {
        color: "#ffffff",
      },
    },
  },
  yAxis: {
    type: "category",
    axisTick: {
      show: false,
    },
    data: ["路灯", "办公楼", "生产车间", "汽车充电桩"],
    axisLine: {
      show: false,
      lineStyle: {
        color: "#fff",
      },
    },
  },
  series: [
    {
      name: "实际能耗",
      type: "bar",
      barWidth: 15,
      // stack: "total",
      label: {
        show: true,
        position: "right",
      },
      itemStyle: {
        normal: {
          color: "#0E6DE9",
        },
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#ffffff",
        },
      },
      emphasis: {
        focus: "series",
      },
      data: [0, 0, 0, 0, 0, 0, 0],
    },
    {
      name: "预计能耗",
      type: "bar",
      // stack: "total",
      barWidth: 15,
      label: {
        show: true,
        position: "right",
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#ffffff",
        },
      },
      itemStyle: {
        normal: {
          color: "#AC4ED3",
        },
      },
      emphasis: {
        focus: "series",
      },
      data: [0, 0, 0, 0, 0, 0, 0],
    },
  ],
};
export default {
  setup(props, conts) {
    const energyConsumption = ref(null);
    const energdetail = ref(conts.attrs.pseudoData);

    onMounted(async () => {
      console.log(energdetail.value);
      let barEnergyConsump = echarts.init(energyConsumption.value);
      if (energdetail.value && energdetail.value.pseudoData) {
        if (typeof energdetail.value.pseudoData == "string") {
          energdetail.value.pseudoData = JSON.parse(
            energdetail.value.pseudoData
          );
        }

        energdetail.value.pseudoData.days = parseInt(
          parsing.getDaysBetween(
            energdetail.value.pseudoData.garden_data,
            parsing.getNowTime()
          )
        );
        energyConsumptionOption.series[0].data = [
          energdetail.value.pseudoData.actual_street,
          energdetail.value.pseudoData.actual_building,
          energdetail.value.pseudoData.actual_workshop,
          energdetail.value.pseudoData.actual_charging,
        ];
        energyConsumptionOption.series[1].data = [
          energdetail.value.pseudoData.predict_street,
          energdetail.value.pseudoData.predict_building,
          energdetail.value.pseudoData.predict_workshop,
          energdetail.value.pseudoData.predict_charging,
        ];
      }

      barEnergyConsump.setOption(energyConsumptionOption);
      window.addEventListener("resize", function () {
        //自适应大小, 不用的话不会自适应大小。
        barEnergyConsump.resize();
      });
    });
    return {
      energyConsumption,
    };
  },
};
</script>
<style scoped>
@import "../../assets/css/common.css";
@import "../../assets/css/geoMap.css";
@import "../../assets/css/style.css";

.electro-charts {
  position: relative;
  bottom: 20px;
  width: 95%;
  height: 100%;
}

.info {
  height: 48%;
  width: 100%;
  /* background-color: rgba(0, 22, 142, 0.5); */
  /* border: 1px solid #02a7ff; */
  /*border-radius: 4px;*/
  box-sizing: border-box;
  position: relative;
  padding: 0 !important;
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: space-between; */
  top: 20px;
}

.info>.info-main {
  width: 100%;
  height: 80%;
}

.info>.info-main>div {
  width: 275px;
  height: 25%;
  background: url("../img/info-text.png") no-repeat;
  margin: 8px auto;
}

.info>.info-main .info-img {
  width: 100px;
  height: 60px;
  position: relative;
}

.info>.info-main .info-img>img {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -24px;
  margin-top: -24px;
}

.info>.info-main .info-text {
  width: 175px;
  height: 70px;
  padding-left: 30px;
  padding-top: 16px;
  box-sizing: border-box;
}

.info>.info-main .info-text>p:nth-child(1) {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

.info>.info-main>.info-1>.info-text>p:nth-child(2) {
  font-weight: 600;
  color: #ffff44;
  font-size: 22px;
}

.info>.info-main>.info-2>.info-text>p:nth-child(2) {
  font-weight: 600;
  color: #25f3e6;
  font-size: 22px;
}

.info>.info-main>.info-3>.info-text>p:nth-child(2) {
  font-weight: 600;
  color: #f84a4a;
  font-size: 22px;
}

.info>.info-main>.info-4>.info-text>p:nth-child(2) {
  font-weight: 600;
  color: #f5c847;
  font-size: 22px;
}

.top-bottom {
  height: calc(49% - 10px);
  width: 100%;
  /* background-color: rgba(0, 22, 142, 0.5); */
  /* border: 1px solid #02a7ff; */
  /* margin-top: 20px; */
  box-sizing: border-box;
  position: relative;
  /* padding: 10px; */
  top: 20px;
}

.data>.data-content .charts {
  top: 0;
}
</style>